<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>图书记录 CRUD</title>
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <div class="wrap">
    <h1>图书记录</h1>

    <form id="book-form" class="card">
      <input type="hidden" id="book-id" />
      <div class="row">
        <label>书名（必填）</label>
        <input id="title" placeholder="输入书名" required />
      </div>
      <div class="row">
        <label>笔记</label>
        <textarea id="notes" rows="4" placeholder="写一些笔记或感想..."></textarea>
      </div>
      <div class="row actions">
        <button type="submit" id="submit-btn">添加图书</button>
        <button type="button" id="cancel-edit" class="btn-link" style="display:none">取消编辑</button>
      </div>
    </form>

    <div id="msg" class="msg"></div>

    <div id="books" class="list"></div>

    <footer>后端：Node + Express · 本地 JSON 存储</footer>
  </div>

  <script src="/app.js"></script>
</body>
</html>